<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>PrimeFaces - Forms Designer</title>
        </f:facet>
   
   		   
   		<script src="#{request.contextPath}/designer/jquery/js/jquery.editinplace.js"></script>
   		<script src="#{request.contextPath}/designer/jquery/js/animatedcollapse.js"></script>     
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/designer/jquery/css/default.css" />

 	<style>
	#feedback { font-size: 1.4em; }
	#droppableroot .ui-selecting { background: #FECA40; }
	#droppableroot .ui-selected { background: #CCFF66; color: black; }
	
	#innerdroppable .ui-selecting { background: #FECA40; }
	#innerdroppable .ui-selected { background: #F39814; color: white; }
	
	.curFocus {
	background: #fdecb2;
	}
	
	</style>
	<script>
	var currentSelection = null;
	$(function() {
		$( "#droppableroot" ).selectable();


		$( "#droppableroot" ).selectable({
			   selected: function(event, ui) {
				   currentSelection = ui.selected;
				    //alert($(ui.selected).html());
			   }

		});

		
	});
	</script>

	
        
        
        	<script>

        	
        	
			var idCounter = 1;
			animatedcollapse.addDiv('jason', 'fade=1,height=80px');
			animatedcollapse.init();
			
			
			function addSection(wid,selectable,addBefore) {
				var codeElement = $(wid).find("code");
				//alert($(codeElement).html());
				var sectionid = "section_"+idCounter++;
				var labelid = "label_"+idCounter++;
				//alert($(codeElement).find("legend").find("div").html());	

				
				
				//var parentTag = $(this).parent("td");
				if(addBefore &amp;&amp; currentSelection)		
					$(currentSelection).before($(codeElement).html());
				else if(currentSelection)
					$(currentSelection).after($(codeElement).html());
				else
					$("#droppableroot").append($(codeElement).html());
				
				$("#droppableroot").find("div[id=sectionid]").attr("id",sectionid);
				$("#droppableroot").find("legend").find("div[id=legendid]").attr("id",labelid);
				
				
				$("#"+labelid).editInPlace({url:"#{request.contextPath}/designer/forms/designercontroller.jsp"});
				
			}

			function addWidget(divid) {
				if(currentSelection) {
					//alert($(currentSelection).first("div[id=droppable]").html());

					$(currentSelection).find("div[id=droppable]").append($("#"+divid).find("code").html());
					
										
				}
			}


			function deleteThis(ctrl,what) {
				if(what== null &amp;&amp; ctrl) {
					var parentTD = $(ctrl).parent().parent().parent().parent();      
					//alert($(parentTD).html());

					var replaceHtml = '&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" id="addfield"&gt;Add Field&lt;/input&gt;&lt;/td&gt;&lt;/tr&gt;';
					$(parentTD).html(replaceHtml);
				} else {
					$(ctrl).parent().remove();
					
					//alert($(ctrl).parent().attr("id"))
				}
			}
			
			function addControl(divid) {
				var checkedFields = $("input[id=addfield]:checked").each(
						function() { 
							var parentTD = $(this).parent("td");       
							
							
								
							$(parentTD).find("div").html($("#"+divid).find("code").html());
							$(parentTD).find("div").html('&lt;p:inputText onfocus="focusField(this);" onblur="blurField(this);" size="40"/&gt;');
							var labelid = "label_"+idCounter++;
							$(parentTD).find("div").attr("id",labelid);
							/*
							$(parentTD).find("div").click(function() {
								
								if($("#inlineEdit").size() == 0 ) {
									var inlineEdit = $('&lt;input/&gt;').attr({ type: 'text', size:'50',name:'inlineEdit',id:'inlineEdit', value:''});
									$(parentTD).find("div").html($(inlineEdit));

									$('#inlineEdit').blur(function(e) {
										$(parentTD).find("div").html($('#inlineEdit').val()); 
									});

									
									$('#inlineEdit').keypress(function(e) {
										code = e.keyCode ? e.keyCode : e.which; 
										if(code.toString() == 13) { 
											 //alert($('#inlineEdit').val());
											 $(parentTD).find("div").html($('#inlineEdit').val()); 
										}
									});
									
								}
								//$("#"+labelid).text();
								//$("#"+labelid).remove();
							});
							*/
							$("#"+labelid).editInPlace({url:"#{request.contextPath}/designer/forms/designercontroller.jsp"});
							//$("#"+labelid).editable("#{request.contextPath}/designer/forms/designercontroller.jsp");
						}); 
				
				
			} 

			function saveForm() {
				alert($("#droppableroot").html());

				$("#finalform").html($("#droppableroot").html());
				$("#finalform").find("img").remove();
			}
			
			function addColumn(ctrl) {
				//alert($(ctrl).parent().find("table").width());

				var columnHtml = '&lt;td&gt;&lt;input type="checkbox" id="addfield"&gt;Add Field&lt;/input&gt;&lt;/td&gt;';
				$(ctrl).parent().find("tr").first().append(columnHtml);
			}

			function focusField(ctrl) {
				if(ctrl) {
					var parentTD = $(ctrl).parent().parent().parent().parent();
					var parentTD1 = $(ctrl).parent().parent().parent().parent().parent().parent();     
					//alert($(currentSelection).find("legend").html()); 
					$(parentTD).addClass("curFocus");
				}
			}

			function blurField(ctrl) {
				if(ctrl) {
					var parentTD = $(ctrl).parent().parent().parent().parent();      
					//alert($(parentTD).html());
					$(parentTD).removeClass("curFocus"); 
				}
				
			}
			
			function showProperties(labelvalue) {
				document.forms['propfrm'].fld_label.value = ""
			}
			
			function dropWidget(uiwidget,target) {
				var codeElement = uiwidget.draggable.find("code");
				var widgetType = codeElement.attr("widgetType");
				
				if(codeElement) {

					
					//alert($(codeElement).html());
					//alert($(droppable).html());
					
					alert( $(target).html());

					var droppableIndex = $(target).html().indexOf("droppable");

					//alert(droppableIndex);
					
					if(droppableIndex != -1) {
						var droppableTarget = $(target).first("div[id=droppable]");
						alert('DroppableTarget:'+$( droppableTarget ).html()+", inserting:"+$(codeElement).html());

						
						if(droppableTarget &amp;&amp; $(droppableTarget).attr("appendable") != "true") {
							$(target).find("div[id=droppable]").attr("id",widgetType+"_"+idCounter++) ;
						}
						
						$($(droppableTarget)).append($(codeElement).html());
						
						 
					}						
					else
						$( target ).html( codeElement.html());

					
					if(codeElement.attr("droppable") == "true") {

						
						$( droppableTarget ).droppable({
							greedy: true,
							activeClass: "ui-state-hover",
							hoverClass: "ui-state-active",
							drop: function( event, ui ) {
								
								dropWidget(ui,this)
							}
						});
					}

					
				} 
	
			}
        	
				$(function() {
					/*
					$( "#d_textbox" ).draggable({ revert: "valid" });
					$( "#d_2column" ).draggable({ revert: "valid" });
					$( "#d_1column" ).draggable({ revert: "valid" });
					*/
					
					
				});
	</script>
   
	</h:head>

        <h:body>
        
        
			 <p:growl id="msg" showDetail="true"/>
            <p:layout fullPage="true">
				<p:ajax event="toggle" listener="#{layoutBean.handleToggle}" update="msg" />
                <p:layoutUnit style="text-align:center;" position="north" size="30" header="PrimeFaces Forms Designer" resizable="false" closable="false" collapsible="true">
                    <h:outputText value="" />
                </p:layoutUnit>

                <p:layoutUnit position="south" size="40" style="text-align:right;" header="Making Primes simpler!!! Nov 2011." resizable="false" closable="false" collapsible="false">
                    <h:outputText value="" />
                </p:layoutUnit>

                <p:layoutUnit position="west" size="200" header="Palette" resizable="true" closable="false" collapsible="true">
                    <h:form style="text-align: center">
                        <ui:include src="../../templates/themeMenu.xhtml" />
                    </h:form>		
                    
                    <p:accordionPanel activeIndex="0" autoHeight="false">
                    	<p:tab title="Input Types">
                    	
                    		<div id="d_textbox" onclick="addControl(this.id)">
							Input Text<div style="display: none;"><code  widgetType="textbox">
							<table border="0" align="center" width="100%">
								<tr><td nowrap="nowrap"><div id="labelid">(Click here to add text)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><img onclick="deleteThis(this);" src="#{request.contextPath}/designer/forms/delete.png"></img></td></tr>
								<tr><td><p:inputText onfocus="focusField(this);" onblur="blurField(this);" size="40"/></td></tr>
							</table> 
							
							
							</code></div>
							</div>
                    		
                    		
                    		<div id="d_selectbox" onclick="addControl(this.id)">
							Select Box<div style="display: none;"><code  widgetType="textbox">
							<table border="0" align="center" width="100%">
								<tr><td nowrap="nowrap"><div id="labelid">(Click here to add text)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><img onclick="deleteThis(this);" src="#{request.contextPath}/designer/forms/delete.png"></img></td></tr>
								<tr><td ><p:selectOneMenu value=""> 
											<f:selectItem itemLabel="Select One" itemValue="" />  
											<f:selectItem itemLabel="Male" itemValue="male" />
											<f:selectItem itemLabel="Female" itemValue="female" />
											<f:selectItem itemLabel="Unknown" itemValue="unknown" />
										</p:selectOneMenu></td></tr>
							</table> 
							
							
							</code></div>
							</div>
                        </p:tab>
                        <p:tab title="Sections">

                          
                        
                            <div id="d_fieldset" onClick="addSection(this,true,true);">
								Add Section Before
								<div style="display: none;">
								<code droppable="true" widgetType="fieldset">
									<div id="sectionid">
									<img onclick="deleteThis(this,'section');" src="#{request.contextPath}/designer/forms/delete.png"></img>
									<br/>
									<fieldset class="collapsible">
									<legend><div id="legendid" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-top">(Click here to add text)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></legend>
									
										<div id="droppable" appendable="true"><br/></div>
									</fieldset>
									</div>
								</code>
								</div>
							</div>
							
							<div id="d_fieldset" onClick="addSection(this,true);">
								Add Section After
								<div style="display: none;">
								<code droppable="true" widgetType="fieldset">
									<div id="sectionid">
									<img onclick="deleteThis(this,'section');" src="#{request.contextPath}/designer/forms/delete.png"></img>
									<br/>
									<fieldset class="collapsible">
									<legend><div id="legendid" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-top">(Click here to add text)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></legend>
									
										<div id="droppable" appendable="true"><br/></div>
									</fieldset>
									</div>
								</code>
								</div>
							</div>

                            <div id="d_2column" onClick="addWidget(this.id)">
								2-Column Layout
								<div style="display: none;">
								<code droppable="true" widgetType="fieldset">
									<div id="columnid">
									<img onclick="deleteThis(this,'d_2column');" src="#{request.contextPath}/designer/forms/delete.png"></img>
									<img onclick="addColumn(this);" src="#{request.contextPath}/designer/forms/add.png"></img>
									<table border="0" align="center" width="100%" style="overflow: auto;">
									<tr>
										
									</tr>
									</table>
									</div>
								</code>
								</div>
							</div>	
							
							 <div id="d_1column" onClick="addWidget(this.id)">
								1-Column Layout
								<div style="display: none;">
								<code droppable="true" widgetType="fieldset">
									<table border="0" align="center" width="100%">
									<tr>
										<td>
											<input type="checkbox" id="addfield">Add Field</input>
										</td>
									</tr>
									</table>
									
								</code>
								</div>
							</div>										
                        </p:tab>
                    </p:accordionPanel>
                    
                </p:layoutUnit>

                <p:layoutUnit position="east" size="200" header="Properties" resizable="true" closable="false" collapsible="true" effect="drop">
						<h:form id="propfrm" class="flz_form" action="">
							<table>
								<tr>
									<td>
									<label>Field Label</label>
									<input id="fld_label" type="text" size="20"></input>
									</td>
								</tr>
							</table>
						</h:form>                    
                </p:layoutUnit>

                <p:layoutUnit id="formcontent" position="center" collapsible="true">
                			<h:form id="contentfrm" class="" action="">
							<div id="droppableroot" >
									
									
							</div>
							
							<div align="center">
								<input type="button" value="Save" onClick="saveForm();return false;">  
      
								</input>  
								
							</div>
							<br/>
							<div id="finalform" >
									
									
							</div>
							
							</h:form>
					
 	
 							

 	
 	
 	<!--
	
 	<p:fieldset legend="Address" toggleable="true" toggleSpeed="500">
	
		<table border="0" align="center" width="100%">
			<tr><td><br/></td></tr>
			<tr>
				<td>
		            <label for="custno">Customer Number</label>
		            <p:inputText size="50"/>
				</td>

				<td>
		            <label for="custno">Customer Number</label>
		            <p:inputText size="50"/>
				</td>
				<td>
		            <label for="custno">Customer Number</label>
		            <p:inputText size="50"/>
				</td>
			</tr>
			<tr></tr>			
		</table>
	
	

 	 </p:fieldset> 
	
-->
				

                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
    
    <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
    <script language="javascript">
        dp.SyntaxHighlighter.ClipboardSwf = '#{request.contextPath}/syntaxhighlighter/scripts/clipboard.swf';
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>
</html>

